<template>
    <div class="price-container">
        <span style="font-size: 14px;">￥</span>
        <span style="font-size: 18px;">{{ pointBefore(price) }}.</span>
        <span style="font-size: 13px;">{{ pointAfter(price) }}</span>
        <!-- ￥<label>{{ formattedPrice.integerPart }}</label>.<label style="font-size: 14px">{{ formattedPrice.decimalPart }}</label> -->
        <label v-if="formattedPrice.activePrice > 0" class="huodongjia">活动价</label>
        <label v-if="formattedPrice.activePrice > 0" class="active-price">￥{{ formattedPrice.activePrice }}</label>
    </div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { pointBefore, pointAfter } from '../util/tools.js';

export default defineComponent({
    name: 'PriceDisplay',
    props: {
        price: {
            type: Number,
            required: true
        },
        activePrice: {
            type: Number,
            required: true
        }
    },
    setup(props) {
        const formattedPrice = computed(() => {
            var activePrice = 0;
            if(props.activePrice > 0){
                activePrice = props.activePrice;
            }
            return { activePrice };
        });

        return {
            formattedPrice, pointBefore, pointAfter
        };
    },
});
</script>

<style scoped>
.price-container {
    display: inline-block;
}
.huodongjia {
    background-color: red;
    border-radius: 10px;
    color: aliceblue;
    width: 10%;
    font-size: 10px;
    cursor: pointer;
    margin-left: 5px;
    padding: 1px 2px 0px 2px;
}
.active-price {
    font-size: 10px;
    color: darkgrey;
    text-decoration: line-through;
}
.price-container span {
    color: red;
    font-weight: bold;
}
</style>